<template>
  <div class="notebook-page-wrapper">
    <cn-split-pane
      style="height: calc(100vh)"
      @spliter-mouseenter="onSpliterMouseenter"
      @spliter-mouseleave="onSpliterMouseleave"
    >
      <cn-pane
        v-show="isSidebarOpen"
        size="220px"
        min-size="220px"
        max-size="calc(100vw - 50px)"
        :style="{ backgroundColor: 'rgb(251, 251, 250)' }"
      >
        <page-left />
      </cn-pane>
      <cn-pane><note-content /></cn-pane>
    </cn-split-pane>
    <new-lark-note-modal />
  </div>
</template>

<script setup lang="ts">
import CnSplitPane, { CnPane } from 'cn-split-pane-vue';
import { usePageLeftStore } from '@/plugins/pinia/store/page-left';
import NoteContent from './note-content';
import PageLeft from './page-left';
import NewLarkNoteModal from '@/views/components/new-lark-note-modal.vue';
import { useNodeTreeCacheStore } from '@/plugins/pinia/store/node-tree-cache';

const nodeCacheStore = useNodeTreeCacheStore();

const pageLeftStore = usePageLeftStore();
const isSidebarOpen = computed(() => {
  return pageLeftStore.isSidebarOpen;
});

// 鼠标是否位于分割线上
const isSpliterHover = ref(false);
provide('isSpliterHover', readonly(isSpliterHover));

const onSpliterMouseenter = () => {
  isSpliterHover.value = true;
};
const onSpliterMouseleave = () => {
  isSpliterHover.value = false;
};

onMounted(() => {
  const keyNodeMap_ = nodeCacheStore.keyNodeMap;
  nodeCacheStore.expandedKeys.forEach(expandedKey => {
    const node = keyNodeMap_[expandedKey];
    if (node) {
      nodeCacheStore.expandNode({ node, expanded: true });
    }
  });
});
</script>

<style lang="less">
body {
  margin: 0;
}
.side-bar-menu-dropdown {
  .ant-dropdown-menu {
    border-radius: 4px;
    padding: 6px 0;
    // width: 256px;
    min-width: 150px;
    box-shadow:
      rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,
      rgba(15, 15, 15, 0.1) 0px 3px 6px,
      rgba(15, 15, 15, 0.2) 0px 9px 24px;
    .ant-dropdown-menu-item {
      padding: 0;
    }
    .ant-dropdown-menu-submenu-title {
      padding: 0;
      display: flex;
      align-items: center;
    }
  }
  .ant-dropdown-menu .ant-dropdown-menu-sub {
    box-shadow: none;
  }
}
</style>
<style lang="less" scoped>
.notebook-page-wrapper {
  :deep(.ant-tree) {
    background: none;
  }
}
</style>
